<!DOCTYPE html>
<html>
<head lang="zh">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/base.css">
	<title>过渡、动画和变换示例</title>
	<style>
		#banana
		{
			font-size: large;
			border: medium solid #000000;
			transition-delay: 100ms;
			transition-duration: 3000ms;;
			transition-timing-function: linear;;
		}
		#banana:hover
		{
			font-size: x-large;
			border-right: medium solid gray;
			background-color: #008000;

			transition-delay: 200ms;
			transition-property: background-color, color, padding;
			transition-duration: 3000ms;;
			transition-timing-function: linear;;
		}
	</style>
</head>
<body>
<noscript>此文档需要JavaScript支持才能正常使用</noscript>
<!-- 定义页头 -->
<header>
	<h1></h1>
</header>

<!-- 定义边栏，书写说明或者放致导航菜单 -->
<aside>
	<nav>
		<ul>

		</ul>
	</nav>
</aside>
<!-- 定义页面内容 -->
<div id="container">
	<p>当鼠标移动到<span id="banana">banana</span>上时它的样式会发生变化，这是由:hover来直接实现的。所有浏览器都支持，也可以用来定义菜单。可以定义过渡的开始时间，也可以定义反向过渡，即在原始样式中定义过渡方始，这样，在发生过渡之前是直接显示元素样式，过渡结束后，将以定义的过渡方式还原。</p>
</div>
<!-- 页面内容结束 -->
<!-- 定义页尾 -->
<footer>

</footer>
<!-- JavaScript脚本链接请在此处插入 -->
</body>
</html>